<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cook</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/mui.css">
</head>
<style>
    .swiper-container {
        width: 100%;
        height: 4rem;
        overflow: hidden;
        margin-top: .1rem;
    }

    .swiper-container img {
        width: 100%;
    }
</style>
<style>
    html,
    body {
        background-color: #efeff4;
    }

    p {
        text-indent: 22px;
    }

    span.mui-icon {
        font-size: 14px;
        color: #007aff;
        margin-left: -15px;
        padding-right: 10px;
    }

    .mui-off-canvas-left {
        color: #fff;
    }

    .title {
        margin: 35px 15px 10px;
    }

    .title+.content {
        margin: 10px 15px 35px;
        color: #bbb;
        text-indent: 1em;
        font-size: 14px;
        line-height: 24px;
    }

    input {
        color: #000;
    }
</style>

<body>
    <div id="app">
        <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">

            <div class="top">
                <div class="search_box mui-bar mui-bar-nav">
                    <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                    <a href="search.html"><i class="search_ico"></i> <input type="text" placeholder="请输入您想搜索的内容"
                            id="search"></a>
                    <!-- <input type="button" value="搜索" id="search_btn"> -->
                </div>
            </div>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="upload/gongbaojiding.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/hongshaorou.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/kelejichi.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/shuizhuroupian.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/xiaolongxia.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/zhou.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!--左上角弹出菜单-->
            <div id="topPopover" class="mui-popover">
                <div class="mui-popover-arrow"></div>
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <!-- <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            <a href="#">川菜</a>
                                        </li>

                                    </ul> -->
                    </div>
                </div>

            </div>
            <!-- 四宫格 -->
            <div class="type">
                <ul>
                    <li>
                        <a href="resultSearch.html?menu=早餐">
                            <div class="ico_zao"></div>
                            <p>早餐</p>
                        </a>
                    </li>
                    <li>
                        <a href="resultSearch.html?menu=午餐">
                            <div class="ico_wu"></div>
                            <p>午餐</p>
                        </a>
                    </li>
                    <li>
                        <a href="resultSearch.html?menu=下午茶">
                            <div class="ico_xia"></div>
                            <p>下午茶</p>
                        </a>
                    </li>
                    <li>
                        <a href="resultSearch.html?menu=晚餐">
                            <div class="ico_wan"></div>
                            <p>晚餐</p>
                        </a>
                    </li>


                </ul>
            </div>

            <div class="like">
                <h5 class="like_h5">----猜你喜欢----</h5>
                <div class="mui-content" style="background-color:#fff">
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item, index) in caiData"
                            :key="index" @click="list($event,item.id)">
                            <a href="#">
                                <img class="mui-media-object" :src="item.albums[0]">
                                <div class="mui-media-body">{{item.title}}</div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>




        </div>
        <!-- <div class="loading-box" style="display:none">
            <div class="loading-icon"><img src="./images/loading_icon0.png" alt=""></div>
            <p>正在加载</p>
        </div> -->
    </div>



    <script src="js/jquery.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/index.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/mui.js"></script>
    <script src="js/mui.pullToRefresh.js"></script>
    <script src="js/mui.pullToRefresh.material.js"></script>
    <script>
        var Vm = new Vue({
            el: "#app",
            data: {
                key: "f25836940c8c65d4021f569c21e8e1dd",
                // 猜你喜欢
                urlCai: "http://apis.juhe.cn/cook/query.php",
                listCai: [
                    '午餐', '面', '早餐', '米饭'
                ],
                caiData: [],
                //侧边栏
                urlCe: "http://apis.juhe.cn/cook/category",
                listCe: [],



            },
            mounted() {
                this.upLoad();
            },
            methods: {
                //点击搜索，弹出搜索页面
                search: function () {
                    location.href = "search.html"
                },
                //页面加载，返回index 数据（猜你喜欢）
                upLoad: function () {
                    this.$http.jsonp(this.urlCai + '?key=' + this.key + '&menu=' + this.listCai[Math.floor(
                        Math.random() * this.listCai.length)]).then((res) => {
                        // console.log(res.body.result.data);
                        this.caiData = res.body.result.data
                    })
                    this.$http.jsonp(this.urlCe + '?parentid=&dtype=&key=' + this.key).then((res) => {
                        this.listCe = res.body.result[0].list

                    })
                },
                celink: function () {
                    // location.href = "http://baidu.com"
                    alert(1)
                },
                list: function (e, id) {
                    location.href = "list.html?id=" + id
                }

            },
        })
    </script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {

            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },



            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    </script>
    <script>
        // mui.init({
        //     pullRefresh: {
        //         container: refreshContainer, //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        //         up: {
        //             height: 50, //可选.默认50.触发上拉加载拖动距离
        //             auto: true, //可选,默认false.自动上拉加载一次
        //             contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
        //             contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
        //             callback: function () {
        //                 // $(".loading-box").show()
        //             }
        //         }
        //     }
        // });
        //可滚动容器的高度
        // let innerHeight = document.querySelector('#app').clientHeight;
        // //屏幕尺寸高度
        // let outerHeight = document.documentElement.clientHeight;
        // //可滚动容器超出当前窗口显示范围的高度
        // let scrollTop = document.documentElement.scrollTop;
        // if (innerHeight < (outerHeight + scrollTop)) { //加载更多操作
        //     console.log("loadmore");
        // }
    </script>
</body>

</html>